<template>
  <div class="container">
    <div class="content">
      <!-- 左侧 -->
      <div class="sidebar">
        <ul class="nav-links">
          <li class="folder-title">
            <span class="folder-icon">📁</span>
            资料夹
          </li>
          <li v-for="item in navItems" :key="item.path"
              :class="{ active: activeItem === item.path }"
              class="nav-item">
            <router-link :to="item.path" class="nav-link">
              <span class="nav-text">{{ item.label }}</span>
              <span v-if="item.count !== undefined" class="count-badge">{{ item.count }}</span>
            </router-link>
          </li>
        </ul>
      </div>

      <!-- 右侧 -->
      <div class="main-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, onMounted, onUnmounted} from 'vue';
import { useRoute } from 'vue-router';
import { getUserPersonalCount } from '@/api/user'; // 确保路径正确
import { on, off } from '@/utils/eventBus';

const route = useRoute();
const activeItem = ref(route.path);
const navItems = ref([
  { path: '/main/result/papers', label: '论文', count: 0 },
  { path: '/main/result/patent', label: '专利', count: 0 },
  { path: '/main/result/software', label: '软件著作权', count: 0 },
  { path: '/main/result/PersonalAward', label: '个人获奖', count: 0 },
  { path: '/main/result/studentAward', label: '学生获奖', count: 0 },
  { path: '/main/result/ContinueEducation', label: '继续教育材料', count: 0 },
  { path: '/main/result/publication', label: '著作', count: 0 },
  { path: '/main/result/Report', label: '新闻报道', count: 0 },
  { path: '/main/result/Certification', label: '档案资料', count: 0 },
  { path: '/main/result/other', label: '其他', count: 0 }
]);

// 获取用户成果数量
const fetchUserCounts = async () => {
  try {
    const response = await getUserPersonalCount();
    const counts = response.data; // 假设返回的数据结构是 UserResultCountVO

    // 更新 navItems 的 count 值
    navItems.value = navItems.value.map(item => {
      const countKey = getCountKey(item.label);
      return {
        ...item,
        count: counts[countKey] || 0
      };
    });

  } catch (error) {
    console.error('获取用户成果数量失败:', error);
  }
};

// 将菜单标签映射到返回数据的字段名
const getCountKey = (label) => {
  const map = {
    '论文': 'paperCount',
    '专利': 'patentCount',
    '软件著作权': 'copyrightCount',
    '个人获奖': 'awardPersonalCount',
    '学生获奖': 'awardStudentCount',
    '继续教育材料': 'materialCount',
    '著作': 'publicationCount',
    '新闻报道': 'reportCount',
    '档案资料': 'certificateinfoCount',
    '其他': 'otherCount'
  };
  return map[label] || '';
};

// 监听路由变化
watch(
    () => route.path,
    (newPath) => {
      activeItem.value = newPath;
    }
);

// 组件挂载时获取数据
onMounted(() => {
  fetchUserCounts();
  on('refresh-counts', fetchUserCounts);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  off('refresh-counts', fetchUserCounts);
});
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
}

.container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  width: 90%;
  max-width: 1200px;
  height: calc(100% - 4rem);
  min-height: 750px;
  margin: 2rem auto;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  backdrop-filter: blur(10px);
  animation: containerFadeIn 0.6s ease-out;
}

@keyframes containerFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.sidebar {
  width: 20%;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-right: 1px solid rgba(226, 232, 240, 0.8);
  padding: 2rem 1rem;
  box-sizing: border-box;
  position: relative;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00b38a, #00d4aa);
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.folder-title {
  color: #1e293b;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 2rem;
  margin-left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: titleSlideIn 0.8s ease-out;
}

@keyframes titleSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.folder-icon {
  font-size: 1.2rem;
  animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  width: 100%;
  margin-bottom: 0.5rem;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: itemFadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.nav-item:nth-child(2) { animation-delay: 0.1s; }
.nav-item:nth-child(3) { animation-delay: 0.2s; }
.nav-item:nth-child(4) { animation-delay: 0.3s; }
.nav-item:nth-child(5) { animation-delay: 0.4s; }
.nav-item:nth-child(6) { animation-delay: 0.5s; }
.nav-item:nth-child(7) { animation-delay: 0.6s; }
.nav-item:nth-child(8) { animation-delay: 0.7s; }
.nav-item:nth-child(9) { animation-delay: 0.8s; }
.nav-item:nth-child(10) { animation-delay: 0.9s; }
.nav-item:nth-child(11) { animation-delay: 1.0s; }

@keyframes itemFadeIn {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.nav-item:hover {
  background: linear-gradient(135deg, rgba(0, 179, 138, 0.08) 0%, rgba(0, 212, 170, 0.12) 100%);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 179, 138, 0.15);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(0, 179, 138, 0.15) 0%, rgba(0, 212, 170, 0.2) 100%);
  border-left: 4px solid #00b38a;
  transform: translateX(2px);
  box-shadow: 0 6px 20px rgba(0, 179, 138, 0.2);
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #64748b;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

.nav-item:hover .nav-link::before {
  left: 100%;
}

.nav-item.active .nav-link {
  color: #00b38a;
  font-weight: 600;
}

.nav-text {
  flex: 1;
  transition: all 0.3s ease;
}

.count-badge {
  background: linear-gradient(135deg, #00b38a 0%, #00d4aa 100%);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  min-width: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 179, 138, 0.3);
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.main-content {
  flex-grow: 1;
  padding: 2rem;
  box-sizing: border-box;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
}

.main-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
      radial-gradient(circle at 20% 80%, rgba(0, 179, 138, 0.03) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(0, 212, 170, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  }

  .nav-item:hover {
    transform: translateX(0);
  }
}
</style>
